<?php
use yii\helpers\Json;
use yii\helpers\Html;
use front\assets\AppAsset;
use yii\helpers\Url;
?>
<?php
$this->title = '评论';
?>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>查看全部评论</title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=0" />
    <meta name="format-detection" content="telephone=no,email=no" />
    <meta name="mobileOptimized" content="width" />
    <meta name="handheldFriendly" content="true" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <link rel="stylesheet" href="/static/css/main.css" />
    <script src="/static/script/zepto.min.js"></script>
</head>
<body>
<div class="m-cmmt" id="J_comm">

    <h4 class="note">全部<?= $data['count']?>条评论</h4>
    <!--评论列表循环开始-->
    <?php foreach($data['list'] as $k=>$v){?>
    <dl>
        <dt><b><?= $v['user_name']?></b><span><small style="width:100%;"></small></span><em><?= $v['created_at']?></em></dt>
        <dd class="desc"><?= $v['content']?></dd>
        <dd class="attr">
            <!--循环输出购买的商品属性开始-->
            <?php foreach($v['product'] as $key=>$val){
                if($key != 'product_id'){?>
            <em><?= $key?>:</em><i><?= $val?></i>
            <?php }} ?>
            <!--循环输出购买的商品属性结束-->
        </dd>
    </dl>
    <?php } ?>
    <!--评论列表循环结束-->

</div>

<img class="m-loading" id="J_loading" src="/static/img/loading.gif" />

<script>
    $(function(){

        //分页
        var _loading = $('#J_loading');
        var forRun = document.getElementById('J_comm');
        var start = 0, flag = true, page = 2, _ground = false;
        forRun.addEventListener('touchstart', function(ev){
            start = ev.touches[0].pageY;
            if(_ground){
                msgPopup("已是最后一页");
                return !1;
            }
        }, false);
        forRun.addEventListener('touchmove', function(ev){

            // 筛选栏显示与隐藏
            var end = ev.touches[0].pageY - start;

            if(end > 0){

                flag = true;
            }else{

                // 控制上拉加载
                if($(document).height() == ($(window).scrollTop() + $(window).height()) && flag){

                    // 加载锁定
                    flag = false;

                    var _val = 0
                    $('#J_comm').each(function(i){

                        $(this).find('a').each(function(){
                            var _this = $(this);
                            if(_this.hasClass(zon)){
                                _val = _this.attr('data-val');
                                console.log(_val);
                            }

                        });
                    });


                    // 先显示 加载中...
                    _loading.css({display:'block'});

                    $.ajax({ url: '/web/comment/list?funcName=?', dataType:'jsonp', data:{'page': page,'per-page':8, 'product_id':<?= $product_id?>}, timeout:5000,

                        success: function(_info){

                            if(_info.length != 0){
                                page ++;
                            }else{
                                _ground = true;
                            }


                            // 请求成功后 隐藏 加载中...
                            _loading.css({display:'none'});


                            $('#J_comm').append(createCommentList(_info));

                            // 加载解锁
                            flag = true;
                        }
                    });

                }
            }

        }, false);
    });

    function createCommentList(json){
        var _li = '';
        for(var i in json) {
            _li += '<dl>' +
                '<dt><b>' + json[i]['user_name'] + '</b><span><small style="width:100%;"></small></span><em>' + json[i]['create_time'] + '</em></dt>' +
            '<dd class="desc">' + json[i]['content'] + '</dd>' +
                '<dd class="attr">';
                for(var k in json[i]['product']) {
                    if(k != 'product_id'){
                        _li += '<em>' + k + ':</em><i>' + json[i]['product'][k] + '</i>';
                    }
                }
            _li += '</dd>' +
            '</dl>';
        }
        return _li;
    }
</script>
</body>
</html>